<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Desktop Flip Clock</title>
        <style>
            #clock {
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 6rem;
                color: #fff;
                background-color: #000;
                border-radius: 0;
                width: 100%;
                height: 100%;
            }

            #hour,
            #minute,
            #second {
                display: inline-block;
                width: 200px;
                height: 200px;
                line-height: 200px;
                text-align: center;
                background-color: #333;
                color: #fff;
                border-radius: 50%;
                margin: 0 50px;
                box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
            }

        </style>
    </head>
    <body>
        <div id="clock">
            <span id="hour"></span> : <span id="minute"></span> :
            <span id="second"></span>
        </div>
    </body>
</html>

<script>
    let isScreenOn = true;

    function updateClock() {
        const now = new Date();
        const hour = now.getHours();
        const minute = now.getMinutes();
        const second = now.getSeconds();
        document.getElementById('hour').textContent = hour;
        document.getElementById('minute').textContent = minute;
        document.getElementById('second').textContent = second;
    }

    function handleVisibilityChange() {
        if (document.hidden) {
            // Computer is sleeping or screen is off
            isScreenOn = false;
        } else {
            // Computer is awake and screen is on
            isScreenOn = true;
        }
    }

    document.addEventListener('visibilitychange', handleVisibilityChange, false);

    setInterval(() => {
        if (isScreenOn) {
            updateClock();
        }
    }, 1000);
</script>
